<template>
  <div class="appointment">
    <!-- 搜索 -->
    <search input-title="实验室" :options="status" @search="onSearch" />

    <div class="container">
      <!-- 新增预约 -->
      <el-button class="addBtn" type="primary" icon="el-icon-plus" @click="addDialog =true">新增预约</el-button>

      <!-- 列表 -->
      <el-table :data="appointmentData" style="width: 100%">
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column prop="labName" label="实验室" align="center" show-overflow-tooltip />
        <el-table-column label="预约时间" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <div>{{ scope.row.times[0].start | formatDate }}</div>
            <div v-for="(item,i) in scope.row.times" :key="i"><span>{{ item.start |formatTime }}</span> - <span>{{ item.end|formatTime }}</span></div>
          </template>
        </el-table-column>
        <el-table-column prop="note" label="备注" align="center" show-overflow-tooltip />
        <el-table-column prop="status" label="预约状态" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0" style="color: #448ef7;">待审批</span>
            <span v-else-if="scope.row.status === 1" style="color: #eb5851;">未通过</span>
            <span v-else-if="scope.row.status === 2" style="color: #72d58c;">已通过</span>
            <span v-else style="color: #919399;">已取消</span>
            <!-- <el-button
              v-if="scope.row.status === 0"
              size="mini"
              type="primary"
            >待审批</el-button> -->
            <!-- <el-button
              v-else-if="scope.row.status === 1"
              size="mini"
              type="danger"
              @click="lookReason"
            >未通过</el-button>
            <el-button
              v-else-if="scope.row.status === 2"
              size="mini"
              type="success"
              @click="lookReason"
            >已通过</el-button>
            <el-button
              v-else
              size="mini"
              type="info"
            >已取消</el-button> -->
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" >
          <template slot-scope="scope">
            <div style="display: flex;justify-content: center;">
              <el-button
              class="btnWidth"
              type="primary"
              @click="toMore(scope.row)"
            >详情</el-button>
            <el-button
              v-if="scope.row.status === 0"
              class="btnWidth"
              type="info"
              @click="handleEdit(scope.row, 'cancel')"
            >取消</el-button>
            <el-button
              v-else
              class="btnWidth"
              type="danger"
              @click="handleEdit(scope.row, 'del')"
            >删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <pagination :currentPage="currentPage" :total="total" @changCurrentPage="changCurrentPage" />

    <!-- 新增弹框 -->
    <addDialog v-if="addDialog" :add-dialog="addDialog" @success="addSuccess" @close="addDialog=false" />
    <!--  -->
    <moreDialog v-if="moreDialog" :info="currentAppointment" :more-dialog="moreDialog" @close="moreDialog=false" />
  </div>
</template>

<script>
import { getAppointmentListAPI,cancelAppointmentAPI ,delAppointmentAPI} from '@/api/web/hjUser.js'
import addDialog from './components/addDialog.vue'
import moreDialog from './components/moreDialog.vue'
import pagination from '../components/pagination.vue'
import search from '../components/search.vue'
import { mapState } from 'vuex'
export default {
  components: {
    search,
    pagination,
    addDialog,
    moreDialog
  },
  data() {
    return {
      appointmentData: [],
      currentPage: 1,
      addDialog: false,
      moreDialog: false,
      status: [
        {
          label: '待审批',
          value: 0
        },
        {
          label: '未通过',
          value: 1
        },
        {
          label: '已通过',
          value: 2
        },
        {
          label: '已取消',
          value: 3
        }
      ],
      currentAppointment: {},
      total: 0
    }
  },
  created() {
    this.getAppointmentList({
      labId: '',
      status: '',
      id: this.searchId
    })
  },
  computed: {
    ...mapState('hjuser', ['searchId'])
  },
  methods: {
    async getAppointmentList(params, size = 0) {
      const { content, totalElements } = await getAppointmentListAPI(params, size)
      this.appointmentData = content.map(item => ({ ...item, times: JSON.parse(item.times) }))
      this.total = totalElements
      this.$store.commit('hjuser/updatedsearchId', '')
    },
    onSearch(input, lab, status) {
      this.getAppointmentList({
        labId: lab,
        status,
        id: this.searchId
      })
    },
    clickAdd() {},
    changCurrentPage(page) {
      this.currentPage = page
      this.getAppointmentList({}, page - 1)
    },
    async handleEdit(row, type) {
      if (type === 'cancel') {
        // 取消审批接口请求
      await cancelAppointmentAPI(row.id)
      row.status = 3
      } else {
        // 删除记录接口请求
        await delAppointmentAPI(row.id)
        this.getAppointmentList({
      labId: '',
      status: '',
      id: this.searchId
    })
    this.currentPage =1
      }
    },
    lookReason(row) {
      // console.log(1)
    },
    toMore(row) {
      this.moreDialog = true
      this.currentAppointment = row
    },
    addSuccess(){
      this.getAppointmentList({
      labId: '',
      status: '',
      id: this.searchId
     })
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  padding-top: 10px;
  // height: 800px;
  background-color: #fff;
  border-radius: 10px;
  & .el-table ::v-deep {
    font-size: 16px;
    .el-table__cell {
      padding: 15px 0;
    }
  }
  .addBtn {
    cursor: pointer;
    margin: 0 0 15px 15px;
    height: 40px;
    font-size: 16px;
    padding: 9px 15px;
  }
}
.appointment ::v-deep{
  .el-pagination.is-background .btn-prev,
 .el-pagination.is-background .btn-next,
 .el-pagination.is-background .el-pager li,
 .el-pagination__total {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
 }
 .el-pagination__total {
  width: unset;
}
}
.pagination {
  text-align: right;
  padding: 25px 0 0;
}
.btnWidth {
  padding: 7px 8px;
  font-size: 16px;
  height: 35px;
}
</style>
